<template>
  <!-- 用户关注列表 -->
  <ul>
    <li v-for="user in usercare">
      <!-- avatarUrl 头像路径 -->
      <section>
        <img :src="user.avatarUrl" alt="">
        <!-- 头像下方logo -->
        <!-- <div> -->
        <span class="iconfont">&#xe620;</span>
        <!-- </div> -->
      </section>
      <aside>
        <!-- nickname 账户名称 -->
        <!-- vipRights->associator.iconUrl 名字后方小图标 -->
        <h3>{{ user.nickname }}<img :src="user.vipRights?.associator?.iconUrl"></h3>
        <!-- signature 用户描述 -->
        <p class="user-signature">{{ user.signature }}</p>
        <!-- playlistCount 歌单数量 -->
        <!-- followeds 粉丝数量 -->
        <p>
          <span>歌单：{{ user.playlistCount }}</span> |
          <span>粉丝：{{ user.followeds }}</span>
        </p>
      </aside>
      <button class="messbtn" @click="drawer = true; getUser(user);">
        <el-icon>
          <ChatDotSquare />
        </el-icon>
        私信
      </button>
    </li>
  </ul>

  <!-- 发送私信 -->
  <el-drawer v-model="drawer" :title="`与“  ${this.infoname}  ”的聊天框`" class="drawerbox">
    <!-- 发送信息的用户名称 -->
    <h3>{{ this.infoname }}</h3>
    <div class="content">
      <div v-if="this.contentvalue[0] !== undefined">
        <div class="msgtitlebox">
          <!-- <p v-for="value in this.contentvalue" class="msgtitle">{{ value }}</p> -->
          <p v-for="localMsg in localMsgs" class="msgtitle">{{ localMsg }}</p>
        </div>
      </div>
    </div>
    <!-- </template> -->
    <div class="text-box">
      <textarea ref="areaRef" maxlength="200" v-model="areaData" @input="textInput" />
    <span class="numlength">{{ textVal }}/200</span>
    <button @click="sengMessages(areaData); getContent()" class="sendbtn">发送</button>
    </div>
  </el-drawer>
</template>

<script>
import { ChatDotSquare } from '@element-plus/icons-vue'
// 获取用户关注列表接口，发送私信接口
import { getUserCareInterface, SendMessagesInterface } from '../../api/user'
import { mapState } from 'vuex'
export default {
  created() {
    // 获取用户关注
    this.getUserCare({ uid: this.userInfo.userId })
  },
  // mounted() {
  //   this.getContent()
  // },
  data() {
    return {
      // 用户关注用户数据
      usercare: [],
      // 抽屉
      drawer: false,
      // 关注的用户名
      infoname: '',
      // 关注用户的id
      infoid: '',
      // 获取textarea的值
      areaData: '',
      // 发送数据成功的值
      getmsg: '',
      // 内容框的值
      contentvalue: [],
      // 当前与被私信用户的本地存储的聊天信息
      localMsgs: '',
      // 文本框字符数量
      textVal: 0
    }
  },
  computed: {
    ...mapState('userInfoModule', ['userInfo']),
  },
  methods: {
    getUserCare(params) {
      getUserCareInterface(params).then(res => {
        this.usercare = res?.follow
        // userId 账号id
        // eventCount 动态数量
      })
    },

    // 抽屉传值
    getUser(info) {
      // 异步请求，在定时器中获取输入框焦点
      setTimeout(() => {
        this.$refs.areaRef.focus()
      });
      this.infoname = info.nickname
      this.infoid = info.userId
    },

    // 点击发送，触发发送私信方法，将数据传送给接口
    sengMessages(msg) {
      SendMessagesInterface({ user_ids: this.infoid, msg }).then(res => {
        // // 获取到的msg的值
        this.getmsg = JSON.parse(res.newMsgs[0].msg).msg
        // console.log(JSON.parse(res.newMsgs[0].msg).msg, '发送私信');

        // 本地存储聊天记录chatRecords
        if (!localStorage.getItem('chatRecords')) {
          localStorage.setItem('chatRecords', JSON.stringify({}))
        }
        const record = JSON.parse(localStorage.getItem("chatRecords"))
        if (record[this.infoid]) {
          record[this.infoid].push(this.getmsg)
        } else {
          record[this.infoid] = [this.getmsg]
        }
        this.contentvalue = record[this.infoid]
        // console.log(record);
        localStorage.setItem("chatRecords", JSON.stringify(record))

        // 获取用户信息
        this.getContent()
        // 发送信息成功后将输入框内容设置为空
        this.areaData = ''
        // 发送过后，如果还在此页面，重新获取焦点
        setTimeout(() => {
          this.$refs.areaRef.focus()
        });
      })
    },

    // 文本框输入字符数量
    textInput() {
      this.textVal = this.areaData.length
    },

    // 内容框显示当前用户信息
    getContent() {
      const record2 = JSON.parse(localStorage.getItem("chatRecords"))
      // 拿到当前与被私信用户的本地存储的聊天信息
      this.localMsgs = record2[this.infoid]
      console.log(record2, 'record2');
      console.log(this.localMsgs, 'localMsgs');
    },
  },
  components: {
    ChatDotSquare
  }
}
</script>


<style lang="scss" scoped>
// 用户关注列表
* {
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

ul>li {
  list-style: none;
  width: 400px;
  height: 150px;
  background-color: rgb(255, 248, 238);
  margin: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

li>aside {
  h3 {
    font-weight: 500;
    margin-bottom: 15px;
    display: flex;
    align-items: center;

    img {
      width: 40px;
      margin-left: 5px;
    }
  }

  // 用户描述
  .user-signature {
    width: 160px;
    overflow: hidden; //超出部分隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //省略号
    color: #666;
  }

  p {
    color: #666;
    margin: 5px 0;

    span:nth-of-type(1) {
      margin-right: 5px;
    }

    span:nth-of-type(2) {
      margin-left: 5px;
    }
  }
}

li>section {
  position: relative;
}

li>section>img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #9b9393;
  margin-right: 10px;
}


// 大V - 引入iconfont矢量库
@font-face {
  font-family: 'iconfont';
  // src: url('iconfont.ttf?t=1681894647450') format('truetype');
  src: url('../../styles/font_bdgvzsz11u7/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  color: rgb(237, 64, 54);
  font-size: 22px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  bottom: 5px;
  right: 10px;
}

// 抽屉中的样式
.el-drawer {
  h3 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
    margin-top: -10px;
  }
}

.content {
  width: 100%;
  height: 60%;
  border: 3px solid #e3dfdf;
  border-radius: 20px;
  padding: 5px;
  overflow: auto;
}

// 输入框大盒子
.text-box{
  position: relative;
  width: 300px;
  height: 100px;
}

textarea {
  width: 300px;
  height: 100px;
  border: 2px solid #dad4d4;
  border-radius: 10px;
  margin-top: 20px;
  box-shadow: none;
  outline: none;
  outline-color: #666;
  padding: 10px;
  color: #666;
  font-size: 16px;
  resize:none
}

textarea:focus {
  box-shadow: inset 0px 0px 5px 2px rgb(155, 153, 153);
}

.numlength{
  position: absolute;
  right: 5px;
  bottom: -15px;
  color: #807c7c;
}

// 信息条
.msgtitle {
  background-color: #e5dddd;
  float: right;
  padding: 5px;
  margin-right: 5px;
  border-radius: 3px;
  margin-bottom: 10px;
}

// 信息条大盒子
.msgtitlebox {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: end;
}

// 发送按钮
.sendbtn {
  width: 70px;
  height: 35px;
  border-radius: 10px;
  border: 1px solid #a4a0a0;
  font-size: 13px;
  color: #666;
  background-color: #ffffff;
  margin-left: 20px;
  position: absolute;
  bottom: 0;
}

// 私信按钮
.messbtn {
  width: 80px;
  height: 25px;
  border-radius: 20px;
  border: 1px solid rgb(157, 158, 157);
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 5px;
  background-color: rgb(255, 248, 248);
  margin-left: 10px;
}

.messbtn>.el-icon {
  font-size: 14px;
}
</style>
